<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="tableData.slice((currentPage - 1) * 10, currentPage * 10)"
      style="width: 100%; text-align: center"
    >
      <el-table-column label="名称">
        <template slot-scope="scope">
          <div @click="showSlide(scope.row)" style="height: 46px">
            {{ scope.row.userName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="password" label="密码" />
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatar | handleImgPath"
            width="100"
            height="100"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="310">
        <template slot-scope="scope">
          <!-- scope.row获取当前这一条数据 -->
          <el-button type="success" size="small" @click="edituser(scope.row)"
            >修改用户信息</el-button
          >
          <el-button type="primary" size="small" @click="edituserpwd(scope.row)"
            >修改用户密码</el-button
          >
          <el-button type="danger" size="small" @click="deluser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :total="totalcount"
      layout="prev, pager, next,jumper"
      @current-change="countChange"
    >
    </el-pagination>
    <!-- 修改 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogVisible" width="60%">
      <el-form ref="user" :model="user" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="user.name" />
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="http://lanlianhua.work:8888/api/v1/common/file_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editsure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户密码 -->
    <el-dialog title="修改用户密码" :visible.sync="dialogVisible1" width="60%">
      <el-form ref="userpwd" :model="user" label-width="80px">
        <el-form-item label="原密码">
          <el-input v-model="user.password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="user.newPassword" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="editPwdsure">确 定</el-button>
      </span>
    </el-dialog>
    <slide-view
      :show="showFlag"
      :showFlag.sync="showFlag"
      :message="message"
    ></slide-view>
  </div>
</template>

<script>
import {
  getUsers,
  xiugaiuser,
  shanchuuser,
  updatePwd,
  getUsersP,
} from "@/api/user";
import SlideView from "@/views/mixin/slideminxin";

export default {
  mixins: [SlideView],
  name: "UserList",
  components: {},
  data() {
    return {
      loading: true,
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      imageUrl: '', // 表示头像路径
      id: '',
      totalcount: 1, //总数量
      currentPage: 1, //  默认显示第几页
      user: {
        name: "",
        password: "",
        newPassword: "",
      },
    };
  },

  created() {
    this.initUsers();
  },
  methods: {
    countChange(val) {
      this.currentPage = val;
      console.log(val);
    },
    async initUsers() {
      const result = await getUsersP({
        per: 400,
        page: 1
      })
      console.log(111, result)
      this.tableData = result.users
      this.totalcount = result.totalCount
      this.loading = false
    },
    // 处理图片
    handleImgPath(str) {
      if (str) {
        if (str.startsWith("http") || str.startsWith("data")) {
          return str;
        } else {
          return "http://lanlianhua.work:8888" + str;
        }
      } else {
        return "http://www.superslide2.com/demo/images/pic3.jpg";
      }
    },
    // 弹出修改弹框
    edituser(user) {
      this.dialogVisible = true;
      this.user.name = user.userName;
      this.imageUrl = this.handleImgPath(user.avatar);
      this.id = user._id;
    },
    // 弹出修改密码弹窗
    edituserpwd(user) {
      this.dialogVisible1 = true;
      this.user.password = user.password;
      this.id = user._id;
    },
    // 确人修改密码
    async editPwdsure() {
      const reuslt = await updatePwd(this.id, {
        password: this.user.newPassword,
      });
      console.log(111222, reuslt);
      this.dialogVisible1 = false; // 关闭弹框
      this.initUsers(); // 再次调用接口
    },

    // 确定修改用户信息
    async editsure() {
      const reuslt = await xiugaiuser(this.id, {
        userName: this.user.name,
        avatar: this.imageUrl,
      });
      console.log(1212112, reuslt);
      // 关闭弹框
      this.dialogVisible = false; // 关闭弹框
      this.initUsers(); // 再次调用接口
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.imageUrl = "http://lanlianhua.work:8888" + res.info;
    },
    // 删除
    async deluser(user) {
      const result = await shanchuuser(user._id);
      this.initUsers();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/edit.scss";
.el-pagination {
  width: 600px;
  margin: 0 auto;
}
</style>
